<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>user</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script src="../public/jquery.serializejson.min.js"></script>
    <style>
        /* 表单label样式 */
        .textbox-label {
            width: 100px;
        }

        .short-label>.textbox-label {
            width: auto;
        }
    </style>
</head>

<body>
    <!-- 表格 -->
    <table id="dg"></table>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" style="width:600px;height:400px;padding:10px" data-options="closed:true">
        <!-- 表单 -->
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <!-- 姓名 -->
            <div style="display: none">
                <input class="easyui-textbox" name="_id" style="width:100%">
            </div>
            <!-- 姓名 -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <!-- 密码 -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="psd" style="width:100%" data-options="label:'Password:',required:true">
            </div>
            <!-- 性别 -->
            <div style="margin-bottom:20px" class="short-label">
                <input class="easyui-radiobutton" name="sex:boolean" data-value-type="boolean" value='true' label="男:">
                <input class="easyui-radiobutton" name="sex:boolean" value='false' label="女:" data-value-type="boolean">
            </div>
            <!-- 身高 -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="height" style="width:50%" data-options="label:'height:',required:true">
            </div>
            <!-- 年龄 -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="age:number" style="width:50%" data-options="label:'age:',required:true"
                    data-value-type="number">
            </div>
            <!-- 体重 -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="weight" style="width:50%" data-options="label:'weight:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="professional" style="width:50%" data-options="label:'professional:',required:true">
            </div>
            <!-- 联系方式 -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="contact[QQ]" style="width:60%" data-options="label:'QQ:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="contact[tel]" style="width:60%" data-options="label:'tel:',required:true">
            </div>
            <!-- 爱好 -->
            <div style="margin-bottom:20px" class="short-label">
                <input class="easyui-checkbox" name="hobby[]" value="足球" label="足球:">
                <input class="easyui-checkbox" name="hobby[]" value="篮球" label="篮球:">
                <input class="easyui-checkbox" name="hobby[]" value="music" label="music:">
                <input class="easyui-checkbox" name="hobby[]" value="game" label="game:">
                <input class="easyui-checkbox" name="hobby[]" value="dance" label="dance:">
            </div>
            <!-- 国籍 -->
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="nationality" label="nationality:" style="width:70%">
                    <option value="ar">Arabic</option>
                    <option value="bg">Bulgarian</option>
                    <option value="ca">Catalan</option>
                    <option value="zh-cht">Chinese Traditional</option>
                    <option value="cs">Czech</option>
                    <option value="da">Danish</option>
                    <option value="nl">Dutch</option>
                    <option value="China" selected="selected">China</option>
                    <option value="et">Estonian</option>
                    <option value="fi">Finnish</option>
                    <option value="fr">French</option>
                    <option value="de">German</option>
                    <option value="el">Greek</option>
                </select>
            </div>
        </form>
        <!-- 提交按钮 -->
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submit()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    <!-- 搜索 -->
    <div id="dlg2" class="easyui-dialog" title="Basic Dialog" style="width:400px;height:150px;padding:10px"
        data-options="closed:true">
        <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:100%">
    </div>
    <script>
        // 表单提交
        function submit() {
            $('#ff').form('submit', {
                onSubmit: function () {
                    var formData = $('#ff').serializeJSON();
                    // console.log(formData);
                    if (formData._id) {
                        console.log($('#ff').serializeJSON()._id);
                        $.ajax({
                            type: 'put',
                            url: `http://localhost:3000/users/${formData._id}`,
                            data: formData,
                        }).done(res => {
                            $('#dg').datagrid('reload'); //表格数据刷新
                        })
                        $('#dlg').dialog('close'); //关闭对话框
                        $('#dlg').form('clear');
                    } else {
                        delete formData._id;
                        if ($(this).form('enableValidation').form('validate')) {
                            $.ajax({
                                type: 'post',
                                url: 'http://localhost:3000/users',
                                data: formData,
                            }).done(res => {
                                $('#dg').datagrid('reload'); //表格数据刷新
                            })
                            $('#dlg').dialog('close'); //关闭对话框
                            $('#dlg').form('clear');
                        } else {
                            console.log('aaa');
                        }
                    }
                }

            });

        }
        var toolbar = [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function () {
                $('#dlg').dialog('open');
            }
        }, {
            text: 'Cut',
            iconCls: 'icon-cut',
            handler: function () {
                $.messager.confirm('提醒', 'Are you confirm this?', function (r) {
                    if (r) {
                        removes();
                    }
                });

            }
        }, {
            text: '搜索',
            iconCls: 'icon-search',
            handler: function () {
                $('#dlg2').dialog('open');
            }
        }];
        //清空
        function clearForm() {
            $('#dlg').form('clear');
        }
        //修改
        function formShow(id) {
            $.ajax({
                type: 'get',
                url: `http://localhost:3000/users/${id}`
            }).done(res => {
                $('#dlg').dialog('open');
                $('#ff').form('load', res);
            })

        }
        //搜索
        function doSearch(value) {
            $('#dlg2').dialog('close');
            $('#dg').datagrid({
                url: 'http://localhost:3000/users/search',
                pagination: 'true',
                queryParams: {
                    name: value
                },
                fit: true,
                toolbar: toolbar,
                columns: [
                    [{
                            field: 'format',
                            hidden: true,
                            formatter: function (val, row, index) {
                                if (row.sex) {
                                    row.sex = '男';
                                } else {
                                    row.sex = '女';
                                }
                                row.contact = JSON.stringify(row.contact).replace(/\{|\}|\"/g, '');
                            }
                        },
                        {
                            field: 'ck',
                            checkbox: true
                        },
                        {
                            field: 'name',
                            title: 'name',
                            width: 100
                        },
                        {
                            field: 'psd',
                            title: 'psd',
                            width: 100
                        },
                        {
                            field: 'age',
                            title: 'age',
                            width: 100,
                            align: 'right'
                        },
                        {
                            field: 'sex',
                            title: 'sex',
                            width: 100,
                            align: 'center'
                        },
                        {
                            field: 'height',
                            title: 'height',
                            width: 100
                        },
                        {
                            field: 'weight',
                            title: 'weight',
                            width: 100
                        },
                        {
                            field: 'nationality',
                            title: 'nationality',
                            width: 100
                        },
                        {
                            field: 'professional',
                            title: 'professional',
                            width: 100
                        },
                        {
                            field: 'contact',
                            title: 'contact',
                            width: 100
                        },
                        {
                            field: 'hobby',
                            title: 'hobby',
                            width: 100
                        },
                        {
                            field: '_id',
                            title: '操作',
                            formatter: function (val, row, index) {
                                return `<a href="javascript:;" onclick="formShow('${val}');">修改</a> <a href="javascript:;" onclick="delData('${val}');">删除</a>`;
                            }
                        }
                    ]
                ]
            });
        }
        // 删除
        function removes() {
            var datas = $('#dg').datagrid('getSelections');
            var ids = [];
            for (var i = 0; i < datas.length; i++) {
                ids.push(datas[i]._id);
            }
            $.ajax({
                url: 'http://localhost:3000/users/removes',
                type: 'post',
                data: {
                    ids: ids.toString()
                }
            }).done(function () {
                $('#dg').datagrid('reload'); //表格数据刷新
            })
        }


        // 数据表格
        $('#dg').datagrid({
            url: 'http://localhost:3000/users/list',
            pagination: 'true',
            fit: true,
            toolbar: toolbar,
            columns: [
                [{
                        field: 'format',
                        hidden: true,
                        formatter: function (val, row, index) {
                            if (row.sex) {
                                row.sex = '男';
                            } else {
                                row.sex = '女';
                            }
                            row.contact = JSON.stringify(row.contact).replace(/\{|\}|\"/g, '');
                        }
                    },
                    {
                        field: 'ck',
                        checkbox: true
                    },
                    {
                        field: 'name',
                        title: 'name',
                        width: 100
                    },
                    {
                        field: 'psd',
                        title: 'psd',
                        width: 100
                    },
                    {
                        field: 'age',
                        title: 'age',
                        width: 100,
                        align: 'right'
                    },
                    {
                        field: 'sex',
                        title: 'sex',
                        width: 100,
                        align: 'center'
                    },
                    {
                        field: 'height',
                        title: 'height',
                        width: 100
                    },
                    {
                        field: 'weight',
                        title: 'weight',
                        width: 100
                    },
                    {
                        field: 'nationality',
                        title: 'nationality',
                        width: 100
                    },
                    {
                        field: 'professional',
                        title: 'professional',
                        width: 100
                    },
                    {
                        field: 'contact',
                        title: 'contact',
                        width: 100
                    },
                    {
                        field: 'hobby',
                        title: 'hobby',
                        width: 100
                    },
                    {
                        field: '_id',
                        title: '操作',
                        formatter: function (val, row, index) {
                            return `<a href="javascript:;" onclick="formShow('${val}');">修改</a> <a href="javascript:;" onclick="delData('${val}');">删除</a>`;
                        }
                    }
                ]
            ]
        });
        //删除
        function delData(val) {
            console.log($.messager);
            $.messager.confirm('提醒', 'Are you confirm this?', function (r) {
                if (r) {
                    $.ajax({
                        type: 'delete',
                        url: `http://localhost:3000/users/${val}`
                    }).done(function () {
                        $('#dg').datagrid('reload'); //表格数据刷新
                    });
                }
            });

        }
    </script>
</body>

</html>